<!DOCTYPE html>
<html lang="en">

<link rel="stylesheet" href="/static/lib/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/static/lib/layuiadmin/style/admin.css" media="all">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        #startForm {
            border: 0;
            overflow: auto;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }

        body {
            height: 100%;
            overflow: hidden;
        }

        html {
            height: 99%;
        }

    </style>
</head>
<body>

<div id="divBody" style="height: 100%;">

    <div id="noWf" style="display: none; margin: 50px 0px 0px 50px">
        没有找到可以发起的申请
    </div>
    <div class="layui-fluid" id="LAY-component-grid-mobile" style="height: 100%;">
        <div class="layui-row layui-col-space10" style="height: 100%;">
            <div class="layui-col-xs2" style="height: 100%;">
                <div class="layui-card" style="height: 100%;">
                    <div class="layui-card-header">流程列表</div>
                    <div class="layui-card-body" style="height: 92%; overflow: auto;">
                        <ul id="wf">
                        </ul>
                    </div>
                </div>
            </div>

            <div class="layui-col-xs10" style="height: 100%;">
                <div id="startForm" class="layui-card-body" style="height: 100%; background-color: #fff">

                    <div class="layui-form">
                        <div class="layui-form-item" style="margin-bottom: 0px !important;">
                            <div class="layui-input-block">
                                <input type="radio" name="stat" lay-filter="stat" value="1" title="办理中" checked="">
                                <input type="radio" name="stat" lay-filter="stat" value="2" title="已办结">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form" id="gridList" url="/wf/systask/key/pageListVO" showHeader="true"
                         sizeList="[10,20,50,100]" pageSize="10" height="750">
                        <div property="columns" style="display: none; height: 100%">
                            <div type="indexcolumn" width="40" headerAlign="center">No.</div>
                            <div field='userName' width='17%' headerAlign='center' allowSort='true'>用户名</div>
                            <div field='wfName' width='30%' headerAlign='center' allowSort='true'>流程名</div>
                            <div field='createTime' width='25%' headerAlign='center' allowSort='true'>发起时间</div>
                            <div field='sysTaskKeyState' width='25%' headerAlign='center' allowSort='true' renderer="formatState">
                                状态
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../../../common/jquery-3.3.1.min.js"></script>
<script src="/static/lib/layuiadmin/layui/layui.js" type="text/javascript"></script>
<script src="/static/lib/layuiadmin/layui/layui.all.js" type="text/javascript"></script>
<script type="text/javascript" src="../../../common/dataGrid.js"></script>
<script type="text/javascript" src="../../../common/common.js"></script>
<script type="text/javascript" src="../../../common/listTree.js"></script>
<script type="text/javascript" src="../../../common/vue.min.js"></script>
<script language="JavaScript">
    var $ = layui.$
    var gridList = new dataGrid("gridList");
    var codeMap = new Map();
    var form = layui.form;
    var table = layui.table;
    var wfId;
    var state;

    $(document).ready(function () {
        // 1.取得流程状态
        var parameter = {
            "codeTypeName": "flow_state",
            "codeIsParent": 0
        }

        ActHttpRequest("/wf/activity/authority/getUserAll", {}, function (data) {
            console.log(data)
            if(data.List){
                wfId = data.List[0].wfId;
                gridList.load({
                    'wfId': data.List[0].wfId,
                    'sysTaskKeyState': 1
                });

                var str = '';
                data.List.forEach(function (value) {
                    str += "<li  style='cursor:pointer'><a onclick=\"selectwf('" + value.wfId + "','" + value.wfName + "')\">" +
                        "<i class='layui-icon' style='top:1px;position:relative;' id='" + value.wfId + "'></i>" +
                        "<cite>" + value.wfName + "</cite>" +
                        "</a></li>";
                });
                $("#wf").html(str);
                $("#wf li i").html("&#xe620;");
                $("#wf li i").eq(0).html("&#xe614;");
            }
        });

        ActHttpRequest("/sys-code/list", parameter, function (data) {
            if (data.OK != "OK") {
                layer.msg('取得流程状态失败！', {
                    time: 20000, //20s后自动关闭
                    btn: ['OK']
                });
                return;
            }

            // 流程状态保存到codeMap里
            data.List.forEach(function (item, index) {
                codeMap.set(item.codeValue, item.codeName)
            })

            form.render();

        }, null, null, null, '加载中。。。');

        form.on('radio(stat)', function (data) {
            state = data.value;
            gridList.reload({
                'wfSystaskKey.wfId': wfId,
                'wfSystaskKey.sysTaskKeyState': state
            });
        });
    });

    function selectwf(wfid, wfName) {
        $("#wf i").html("&#xe620;");
        $("#wf #" + wfid).html("&#xe614;");
        wfId = wfid;
        gridList.reload({
            'wfId': wfid,
            'sysTaskKeyState': state
        });
    }

    /*
*  状态代码替换成中文名
* */
    function formatState(e) {
        var row = e.record;
        var state = "";
        switch (row.sysTaskKeyState) {
            case 1:
                state = "办理中";
                break;
            case 2:
                state = "已办结";
                break;
            case 3:
                state = "已撤销";
                break;
        }
        return state;
    }

</script>
</body>
</html>